<template>
  <div>
    <div class="oralLoss">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{name: 'reportLoss' }">{{$t("nameTitle.reportLoss")}}</el-breadcrumb-item>
        <el-breadcrumb-item>口头挂失</el-breadcrumb-item>
      </el-breadcrumb>
      <!--搜索条件区域-->
      <div class="lossSearch">
        <el-row :gutter="6">
          <!--<el-col :span="2">-->
          <!--<div class="grid-content bg-purple searchInputStyle">查询条件：</div>-->
          <!--</el-col>-->
          <el-col :span="19">
            <div class="grid-content bg-purple-light">
              <avue-form :option="optionFormData" v-model="objForm" ref="formLoss"></avue-form>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="verificationFn">电话验密</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="verificationTips">
      <span
        :class="{'el-icon-circle-close': this.idPass,'color-red': this.idPass,'el-icon-circle-check': !this.idPass,'color-green': !this.idPass }">{{this.idCheckTxt}}</span>
      </div>
      <!--客户信息-->
      <informationShow :data="lossInfoData" :option="lossOption"></informationShow>
      <!--列表信息-->
      <DropDownLoadCrud
        :data="lossAccData"
        :detailData="lossDetailData"
        :option="lossAccOption"
        @checkedListBtn="checkedListBtn"
        @detailListBtn="detailListBtn"
        @sizeChangeDropDownLoadCrud="sizeChangeDropDownLoadCrud"
        @currentChangeDropDownLoadCrud="currentChangeDropDownLoadCrud">
      </DropDownLoadCrud>
      <el-row class="mgt20">
        <el-col :span="8" class="txt-center">
          <el-button type="primary" class="btn btn-primary" @click="lossBtnFn(0)">无密挂失</el-button>
        </el-col>
        <el-col :span="8" class="txt-center">
          <el-button type="primary" class="btn btn-primary" @click="lossBtnFn(1)">口头挂失</el-button>
        </el-col>
        <el-col :span="8" class="txt-center">
          <el-button type="primary" class="btn btn-primary" @click="lossBtnFn(2)">永久口挂</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import Axios from 'axios'
  import $ from 'jquery'
  import informationShow from '@/components/common/informationShow'
  import DropDownLoadCrud from '@/components/common/DropDownLoadCrud'
  import {queryLoss, saveTransCusInfo, saveTransTraffic} from '@/api/bankBiz/loss/loss'

  export default {
    name: 'oral-loss',
    components: {
      informationShow,
      DropDownLoadCrud
    },
    data() {
      let _that = this
      let validateBank = function (rule, value, callback) {
        const bankReg = /^\d{1,}$/
        if (bankReg.test(value)) {
          // 账号
          if (value.indexOf('070667') != -1) {
            if (value.charAt(11) != '1') {
              callback(new Error('请输入对私账号！'))
            } else if (value.length != 22) {
              callback(new Error('请输入22位的对私账号！'))
            } else {
              if (_that.clickEventFlag) {
                _that.lossAccData = []
                _that.lossInfoData = {}
                _that.clickEventFlag = false
                _that.$store.commit('SET_LOSSFLAG', false)
                _that.idCheckTxt = '身份验证未通过'
                _that.idPass = true
                _that.allFn('bankNo')
                _that.customMessageWay = 'bankNo'
              }
              _that.$refs['formLoss'].clearValidate()
            }
          }
          // 卡号
          else if (value.indexOf('62311003') != -1 ||
            value.indexOf('623503001') != -1 ||
            value.indexOf('62299502') != -1 ||
            value.indexOf('62311005') != -1 ||
            value.indexOf('62311007') != -1 ||
            value.indexOf('62264802') != -1 ||
            value.indexOf('62311008') != -1 ||
            value.indexOf('62311006') != -1 ||
            value.indexOf('62264801') != -1 ||
            value.indexOf('62248800') != -1 ||
            value.indexOf('62299501') != -1 ||
            value.indexOf('62248802') != -1 ||
            value.indexOf('62248803') != -1 ||
            value.indexOf('62248810') != -1 ||
            value.indexOf('62248811') != -1 ||
            value.indexOf('62248820') != -1 ||
            value.indexOf('62248880') != -1 ||
            value.indexOf('62248888') != -1 ||
            value.indexOf('62264800') != -1 ||
            value.indexOf('62268811') != -1 ||
            value.indexOf('62268888') != -1 ||
            value.indexOf('62824899') != -1 ||
            value.indexOf('62248801') != -1 ||
            value.indexOf('62824866') != -1 ||
            value.indexOf('62311000') != -1 ||
            value.indexOf('62311001') != -1 ||
            value.indexOf('62311009') != -1 ||
            value.indexOf('62311002') != -1) {
            if (value.length != 16) {
              callback(new Error('请输入16位的卡号！'))
            } else {
              if (_that.clickEventFlag) {
                _that.lossAccData = []
                _that.lossInfoData = {}
                _that.clickEventFlag = false
                _that.$store.commit('SET_LOSSFLAG', false)
                _that.idCheckTxt = '身份验证未通过'
                _that.idPass = true
                _that.allFn('bankNo')
                _that.customMessageWay = 'bankNo'
              }
              _that.$refs['formLoss'].clearValidate()
            }
          } else {
            callback(new Error('请输入正确的卡/账号！'))
          }
          callback()
        } else {
          callback(new Error('卡/账号必须为纯数字！'))
        }
      }
      let validateIdCard = function (rule, value, callback) {
        let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
        // 护照
        if ('17' == _that.objForm.idType) {
          idcardReg = /^\d{1,}$/
        }
        if (idcardReg.test(value)) {
          if (_that.clickEventFlag) {
            _that.lossAccData = []
            _that.lossInfoData = {}
            _that.clickEventFlag = false
            _that.$store.commit('SET_LOSSFLAG', false)
            _that.idCheckTxt = '身份验证未通过'
            _that.idPass = true
            _that.allFn('cardNo')
            _that.customMessageWay = 'cardNo'
          }
          _that.$refs['formLoss'].clearValidate()
          callback()
        } else {
          callback(new Error('请输入正确的证件号码！'))
        }
      }
      return {
        clickEventFlag: false,
        checkFlag: false,
        lossAccDataFlag: false,
        // 顶部搜索栏
        objForm: {},
        optionFormData: {
          'emptyBtn': false,
          'submitBtn': false,
          'menuPosition': 'left',
          'column': [
            {
              'label': '卡/账号',
              'prop': 'cardAccNumber',
              'type': 'search',
              appendClick: () => {
                this.clickEventFlag = true
                this.$refs['formLoss'].validateField('cardAccNumber')
              },
              'mock': {
                'type': 'cardAccNumber'
              },
              'span': 8,
              'rules': [{
                'required': true,
                'message': '请输入卡/账号',
                'trigger': 'blur'
              }, {
                'validator': validateBank,
                'trigger': 'blur'
              }]
            },
            {
              'label': '证件类型',
              'prop': 'idType',
              'type': 'select',
              'value': '11',
              'dicData': [{
                'label': '身份证',
                'value': '11'
              }, {
                'label': '护照',
                'value': '17'
              }],
              'span': 8,
              'mock': {
                'type': 'idType'
              }
            },
            {
              'label': '证件号码',
              'prop': 'idNum',
              'type': 'search',
              appendClick: () => {
                this.clickEventFlag = true
                this.$refs['formLoss'].validateField('idNum')
              },
              'mock': {
                'type': 'idNum'
              },
              'span': 8,
              'rules': [{
                'required': true,
                'message': '请输入证件号码',
                'trigger': 'blur'
              }, {
                'validator': validateIdCard,
                'trigger': 'blur'
              }]
            }]
        },
        idCheckTxt: '身份验证未通过',
        idPass: true,
        lossListAccData: [],
        lossBankNo: '',
//        lossInfoData: {
//          'no': '123456789',
//          'name': '张三',
//          'sex': '男',
//          'idType': '身份证',
//          'idNo': '37289876789876',
//          'idValidit': '10年',
//          'phone': '13287668999',
//          'job': '前端工程师',
//          'country': '中国',
//          'address': '山东省济宁市'
//        },
        lossInfoData: {},
        lossOption: {},
//        lossAccData: [
//          {
//            'no': '卡号/账号',
//            'status': '状态',
//            'name': '账户名',
//            'openDate': '开户日期',
//            'openBank': '开户行',
//            'certStatus': '凭证状态',
//            'timeDepositSum': '活期汇总',
//            'demandDepositSum': '定期汇总',
//            'balance': '余额',
//            'totalNum': 2,
//            'totalPage': 2,
//            'currentPage': 1,
//            'resList': [
//              {
//                'transactionDate': '2020-01-01 12:12:12',
//                'incomeAndExpenditure': '收入',
//                'transactionType': '001',
//                'tradingChannel': '网银',
//                'transactionInformation': '转账',
//                'summaryInformation': '个人汇款'
//              },
//              {
//                'transactionDate': '2020-01-02 12:12:12',
//                'incomeAndExpenditure': '支出',
//                'transactionType': '002',
//                'tradingChannel': 'ATM',
//                'transactionInformation': '转账',
//                'summaryInformation': '汇款'
//              }
//            ]
//          },
//          {
//            'no': '卡号/账号',
//            'status': '状态',
//            'name': '账户名',
//            'openDate': '开户日期',
//            'openBank': '开户行',
//            'certStatus': '凭证状态',
//            'timeDepositSum': '活期汇总',
//            'demandDepositSum': '定期汇总',
//            'balance': '余额',
//            'totalNum': 2,
//            'totalPage': 2,
//            'currentPage': 1,
//            'resList': [
//              {
//                'transactionDate': '2020-01-01 12:12:12',
//                'incomeAndExpenditure': '收入',
//                'transactionType': '001',
//                'tradingChannel': '网银',
//                'transactionInformation': '转账',
//                'summaryInformation': '个人汇款'
//              },
//              {
//                'transactionDate': '2020-01-02 12:12:12',
//                'incomeAndExpenditure': '支出',
//                'transactionType': '002',
//                'tradingChannel': 'ATM',
//                'transactionInformation': '转账',
//                'summaryInformation': '汇款'
//              }
//            ]
//          }
//        ],
        lossAccData: [],
        lossDetailData: [],
        tempData: {},
        lossAccOption: {},
        // 进线验密AND三方验密标识
        callingStatusFlag: false,
        customMessageWay: ''
      }
    },
    created() {
      // 搜索条件配置
      this.lossOption = window.lossOptions.moduleOption.lossOption
      this.lossAccOption = window.lossOptions.moduleOption.lossAccOption
      console.log('loss option data is: ' + JSON.stringify(this.lossOption))
      // if (this.$store.getters.GET_PERSONALFLAG || this.$store.getters.GET_LOSSFLAG) {
      //   this.initCustomerInfo()
      // }
      this.initCustomerInfo()
    },
    mounted() {
      let self = this
      // 验密结果
      window.eventEmitter.$on('EventVerifyResult', (data) => {
        if ('01' == data.i_verifyflag && ('06' == data.p_verifytype || '02' == data.p_verifytype)) {
          self.$store.commit('SET_LOSSFLAG', true)
          self.idCheckTxt = '身份验证通过'
          self.idPass = false
          if ('02' == data.p_verifytype) {
            self.initCustomerInfo()
          }
        }
      })
      // 振铃进线初始化
      window.eventEmitter.$on('EventCallRecordChange', (data) => {
        self.lossInfoData = {}
        self.lossAccData = []
        self.lossListAccData = []
        self.lossBankNo = ''
        self.$store.commit('SET_LOSSFLAG', false)
        self.$store.commit('SET_OFFLINESTATUS', false)
        self.$store.commit('SET_LOSSCHECKFLAG', false)
        self.$store.commit('SET_GLOBALCARDNO', '')
        self.idCheckTxt = '身份验证未通过'
        self.idPass = true
        self.initCustomerInfo()
      })
       //兼容预览外呼离线状态可查询
      window.eventEmitter.$on('EventAgentStatusChanged', (data) => {
        self.$store.commit('SET_OFFLINESTATUS', false)
      })
      // 挂机初始化
      window.eventEmitter.$on('EventInfoReset', (data) => {
        self.lossInfoData = {}
        self.objForm = {
          'cardAccNumber': '',
          'idType': '11',
          'idNum': ''
        }
        self.lossAccData = []
        self.lossListAccData = []
        self.lossBankNo = ''
        self.idCheckTxt = '身份验证未通过'
        self.idPass = true
        self.checkFlag = false
        self.$store.commit('SET_LOSSCHECKFLAG', false)
        self.$store.commit('SET_GLOBALCARDNO', '')
        self.customMessageWay = ''
      })
    },
    methods: {
      // 界面初始化获取客户信息
      initCustomerInfo() {
        let data = Constants.Model
        if (data && data.userData) {
          if ('01' == data.userData.i_verifyflag && ('06' == data.userData.p_verifytype || '02' == data.userData.p_verifytype)) {
            this.$store.commit('SET_LOSSFLAG', true)
            this.idCheckTxt = '身份验证通过'
            this.idPass = false
            if ('01' == data.userData.p_cert_type || '02' == data.userData.p_cert_type) {
              this.objForm.cardAccNumber = data.userData.p_cert_num
              this.allFn('bankNo')
              this.customMessageWay = 'bankNo'
            } else if ('03' == data.userData.p_cert_type) {
              this.objForm.idType = '11'
              this.objForm.idNum = data.userData.p_cert_num
              this.allFn('cardNo')
              this.customMessageWay = 'cardNo'
            }
          } else {
            if (data.userData.g_currAccNo) {
              this.objForm.cardAccNumber = data.userData.g_currAccNo
              this.allFn('bankNo')
            }
          }
        } else {
          console.log('获取客户信息随路数据为空！')
        }
      },
      getDataFn() {
        console.log('下拉加载请求数据中...................')
        this.isScroll = true
      },
      // 勾选框
      checkedListBtn(data) {
        console.log('receive data is: ' + data[0])
        // 标记是否有选中的账号
        this.checkFlag = data[1]
        this.$store.commit('SET_LOSSCHECKFLAG', data[1])
        // 判断是否选中
        if (data[1]) {
          let index = data[0]
          this.lossListAccData = []
          this.lossListAccData.push(this.lossAccData[index])
          sessionStorage.setItem('accName', this.lossListAccData[0].name)
          sessionStorage.setItem('bankNo', this.lossListAccData[0].no)
          sessionStorage.setItem('openBankName', this.lossListAccData[0].openBank)
          this.lossBankNo = this.lossListAccData[0].no
          this.$store.commit('SET_GLOBALCARDNO', this.lossListAccData[0].no)
          if (!this.lossBankNo) {
            window.globalUiKit.notify('提示', '选中的账户信息没有卡号！', 'error')
          }
        } else {
          this.lossBankNo = ''
        }
      },
      // 账户明细接口
      detailListBtn(data) {
        let accountNo = this.lossAccData[data].no
        this.lossDetailData[data] = {}
        this._detailList(accountNo, data)
      },
      // 行数
      sizeChangeDropDownLoadCrud(val) {
        this.lossAccOption.lossPageTable.currentPage = 1
        this.lossAccOption.lossPageTable.pageSize = val
        console.log('行数' + val)
      },
      // 页码
      currentChangeDropDownLoadCrud(val) {
        this.lossAccOption.lossPageTable.currentPage = val
        console.log('页码' + val)
      },
      // 客户信息查询
      _queryCustInfo(typeNo) {
        // 客户信息接口
        let customerParams = {
          namespace: 'Personal',
          key: 'personalInformationShow',
          query: {
            accountNo: '6231100088888421',
            idType: '',
            idNo: ''
          }
        }
        // 卡号
        if ('bankNo' == typeNo) {
          customerParams.query.accountNo = this.objForm.cardAccNumber
          customerParams.query.idType = ''
          customerParams.query.idNo = ''
        }
        // 证件号
        else {
          customerParams.query.accountNo = ''
          customerParams.query.idType = this.objForm.idType
          customerParams.query.idNo = this.objForm.idNum
        }
        queryLoss(customerParams).then((res) => {
          console.log('response lossCusInfoData is: ' + JSON.stringify(res.data.data))
          // 无此客户
          if (!res.data.data) {
            this.lossInfoData = {}
            window.globalUiKit.notify('提示', res.data.message, 'error')
            return
          }
          // 清除验证标识
          if (!this.$store.getters.GET_LOSSFLAG) {
            this.$store.commit('SET_LOSSFLAG', false)
            this.idCheckTxt = '身份验证未通过'
            this.idPass = true
          }
          this.lossInfoData = res.data.data
          saveTransCusInfo(this.lossInfoData.name, this.lossInfoData.idType, this.lossInfoData.idNo)
        }).catch((err) => {
          console.log(err)
        })
      },
      // 列表查询
      _searchList(typeNo) {
        let accountParams = {
          namespace: 'ReportLoss',
          key: 'accountInfoData',
          query: {
            accountNo: '6231100088888421',
            idType: '',
            idNo: ''
          }
        }
        // 卡号
        if ('bankNo' == typeNo) {
          accountParams.query.accountNo = this.objForm.cardAccNumber
          accountParams.query.idType = ''
          accountParams.query.idNo = ''
        }
        // 证件号
        else {
          accountParams.query.accountNo = ''
          accountParams.query.idType = this.objForm.idType
          accountParams.query.idNo = this.objForm.idNum
        }
        queryLoss(accountParams).then((res) => {
          console.log('response loss accountData is: ' + JSON.stringify(res.data.data))
          // 清除选中卡号
          this.checkFlag = false
          this.$store.commit('SET_LOSSCHECKFLAG', false)
          // 清除验证标识
          // this.$store.commit('SET_LOSSFLAG', false)
          // this.idCheckTxt = '身份验证未通过'
          // this.idPass = true
          // 请求数据成功 标识
          this.lossAccDataFlag = true
          this.lossAccData = res.data.data
          if (!this.lossAccData) {
            window.globalUiKit.notify('提示', res.data.message, 'error')
            return
          }
          console.log('lossAccData is: ' + JSON.stringify(this.lossAccData))
        })
      },
      // 明细查询
      _detailList(accountNo, data) {
        let accountParams = {
          namespace: 'ReportLoss',
          key: 'detailListData',
          query: {
            accountNo: accountNo
          }
        }
        queryLoss(accountParams).then((res) => {
          console.log('response loss detail list data is: ' + JSON.stringify(res.data.data))
          if (res.data.code == 200) {
            this.$set(this.lossDetailData, data, res.data.data)
          } else {
            this.$set(this.lossDetailData, data, {})
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      },
      // 电话验密
      verificationFn() {
        let self = this
        if (self.$store.getters.GET_OFFLINESTATUS) {
          window.globalUiKit.notify('提示', '离线状态不能验密！', 'error')
          return
        }
        if (!self.checkFlag) {
          window.globalUiKit.notify('提示', '请先选择一个卡号/账号！', 'error')
          return
        }
        if (!self.lossBankNo) {
          window.globalUiKit.notify('提示', '选中的账户信息没有卡号，不能验密！', 'error')
          return
        }
        window.globalUiKit.confirm('提示', '是否要进行电话验密操作?', function () {
          let userdata = {
            // 私有部分，根据不同验证类型组合
            'p_verifytype': '06', // 验密类型
            'p_cert_type': '01', // 介质类型
            'p_cert_num': self.lossBankNo || '', // 介质号码
            'p_accno': '', // 对公客户号
            'p_oper_id': '', // 对公操作员ID
            'p_pass_type': '01', // 密码类型
            'p_pass_operate': '01', // 交易密码操作
            'p_biz': '00', // 业务操作
            // 公共部分
            'r_function': 'singletransfer',
            'r_flag': '3',
            'con_flag': '1'
          }
          globalUserData.verifyPass(userdata)
          if (window.Settings.verifySwitch) {
            self.$store.commit('SET_LOSSFLAG', true)
            self.idCheckTxt = '身份验证通过'
            self.idPass = false
          }
        })
      },
      // 按钮搜索条件，请求方法集合
      allFn(typeNo) {
        // 离线状态不能操作
        if (this.$store.getters.GET_OFFLINESTATUS) {
          window.globalUiKit.notify('提示', '离线状态不能查询！', 'error')
          return
        }
        this._searchList(typeNo)
        this._queryCustInfo(typeNo)
      },
      // 底部挂失按钮
      lossBtnFn(index) {
        // 离线状态不能操作
        if (this.$store.getters.GET_OFFLINESTATUS) {
          window.globalUiKit.notify('提示', '离线状态不能操作', 'error')
          return
        }
        if (!this.checkFlag) {
          window.globalUiKit.notify('提示', '请选择卡号/账号！', 'error')
          return
        } else {
          // 调接口
          if (index == 0) {
            this._accountLoss('02', '00')
          } else {
            if (!this.$store.getters.GET_LOSSFLAG) {
              window.globalUiKit.notify('提示', '请先进行验密！', 'error')
              return
            }
            if (index == 1) {
              this._accountLoss('02', '02')
            } else if (index == 2) {
              this._accountLoss('01', '01')
            }
          }
        }
      },
      // 挂失接口
      _accountLoss(type, flag) {
        // 客户信息接口
        let lossParams = {
          namespace: 'ReportLoss',
          key: 'accountLoss',
          query: {
            lossMethod: type,
            accountNo: sessionStorage.getItem('bankNo') || ''
          }
        }
        queryLoss(lossParams).then((res) => {
          console.log('response loss result is: ' + JSON.stringify(res.data.data))
          if (200 == res.data.code) {
            if ('01' == type && '01' == flag) {
              window.globalUiKit.notify('提示', '永久挂失成功！', 'success')
              saveTransTraffic('ReportLoss-oralLoss', '成功', '')
            } else if ('02' == type && '02' == flag) {
              saveTransTraffic('ReportLoss-permanentLoss', '成功', '')
              window.globalUiKit.notify('提示', '口头挂失成功！', 'success')
            } else if ('02' == type && '00' == flag) {
              saveTransTraffic('ReportLoss-noSecretLoss', '成功', '')
              window.globalUiKit.notify('提示', '无密挂失成功！', 'success')
            }
            this._searchList(this.customMessageWay)
          } else {
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        }).catch((err) => {
          if ('01' == type && '01' == flag) {
            saveTransTraffic('ReportLoss-oralLoss', '失败', '')
            window.globalUiKit.notify('提示', '永久挂失失败！', 'error')
          } else if ('02' == type && '02' == flag) {
            saveTransTraffic('ReportLoss-permanentLoss', '失败', '')
            window.globalUiKit.notify('提示', '口头挂失失败！', 'error')
          } else if ('02' == type && '00' == flag) {
            saveTransTraffic('ReportLoss-noSecretLoss', '失败', '')
            window.globalUiKit.notify('提示', '无密挂失失败！', 'error')
          }
          console.log(err)
        })
      }
    },
    // 路由拦截
    beforeRouteEnter(to, from, next) {
      next(vm => {
        if (vm.lossBankNo) {
          sessionStorage.setItem('bankNo', vm.lossBankNo)
        } else {
          sessionStorage.setItem('bankNo', '')
        }
      })
    }
  }
</script>

<style scoped>
  .el-breadcrumb {
    padding: 10px 0 !important;
  }

  .el-button--primary {
    margin-top: 5px !important;
  }

  .oralLoss .el-form-item {
    margin-bottom: 0 !important;
  }

  .topTit {
    line-height: 40px;
  }

  .oralLoss .avue-group__item {
    padding: 0 !important;
  }

  .oralLoss .avue-form__group > div {
    padding: 0 !important;
  }

  .mgt20 {
    margin-top: 20px;
  }

  .verificationTips {
    width: 100%;
    height: 1px;
    text-align: right;
    position: relative;
  }

  .verificationTips span {
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 99;
  }
</style>
